<template>
  <div class="page-main">
    <el-breadcrumb class="breadcrumb">
      <el-breadcrumb-item>店主商店</el-breadcrumb-item>
      <el-breadcrumb-item>商店信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-content">
      <div class="box-card">
        <span style="color: #101010; font-size: 16px">商店信息</span>
        <el-button type="primary" v-if="baiduMapInfo.type === 'preview'" @click="baiduMapInfo.type = 'edit'">修改</el-button>
        <el-button type="primary" v-else @click="submitShopInfo">提交</el-button>
      </div>
      <div class="box-body" v-loading="status.ifLoading">
        <el-form
            label-position="left"
            label-width="100px"
            :model="shopStatus"
            style="max-width: 560px;margin-top: 15px"
            :rules="status.rules"
            ref="refForm"
            :disabled="baiduMapInfo.type === 'preview'"
        >
          <el-form-item label="商店名称" prop="shopName">
            <el-input v-model="shopStatus.shopName" />
          </el-form-item>
          <el-form-item label="商店类型" prop="backCateName">
            <el-select v-model="shopStatus.backCateName" filterable>
              <el-option
                  v-for="item in status.backCateNameOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商店电话" prop="shopPhone">
            <el-input v-model="shopStatus.shopPhone" />
          </el-form-item>
          <el-form-item label="自动接单">
            <el-switch v-model="shopStatus.autoAcceptOrder" />
          </el-form-item>
          <el-form-item label="商店LOGO">
            <div class="logo-div">
              <div class="logo-area">
                <img :src="shopStatus.frontImgUrl" class="logoImg"/>
              </div>
              <div class="upload-button-div">
                <el-upload
                    ref="upload"
                    class="upload-demo"
                    :action="jzjUrl + '/uploadShopImage'"
                    :headers="header"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    :before-upload="beforeUpload"
                >
                  <el-button style="height: 50px">
                    <div class="button">
                      <img src="@/assets/img/shopInfo/img.png" />
                      <span>重新上传</span>
                    </div>
                  </el-button>
                </el-upload>
                <div class="tip">建议图片比例为1:1</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="商店地址" prop="shopAddress">
            <el-input v-model="shopStatus.shopAddress" />
          </el-form-item>
          <el-form-item label="具体位置" prop="latitude">
            <baidu-map :info="baiduMapInfo" @mark="setOrgPosition"></baidu-map>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import BaiduMap from "@/components/BaiduMap";
import {nextTick, onMounted, reactive, ref} from "vue";
import {httpPostManage, jzjUrl} from "@/api/httpService";
import VueCookies from "vue-cookies";
import {ElMessage} from "element-plus";
import {cutPicture} from "@/tool/manage";

const refForm = ref(null);

const status = reactive({
  ifLoading: false,
  backCateNameOptions: [],
  rules: {
    shopName: [
      { required: true, message: "请输入商店名字", trigger: "blur" }
    ],
    backCateName: [
      { required: true, message: "请选择商店类型", trigger: "blur" }
    ],
    shopPhone: [
      { required: true, message: "请输入商店电话", trigger: "blur" }
    ],
    shopAddress: [
      { required: true, message: "请输入商店地址", trigger: "blur" }
    ],
    latitude: [
      { required: true, message: "请选择商店的定位", trigger: "blur" }
    ]
  }
});

const shopStatus = reactive({
  shopName: "",
  backCateName: "",
  shopPhone: "",
  shopAddress: "",
  frontImgUrl: "https://img.yzcdn.cn/vant/custom-empty-image.png",
  autoAcceptOrder: true,
  latitude: "",
  longitude: ""
});

const baiduMapInfo = reactive({
  type: "preview",
  lat: "",
  lon: ""
});

const getAllBackCateName = async () => {
  let url = "/getAllBackCateName";
  let res = await httpPostManage(url, {});
  res.data.forEach((item) => {
    let it = {
      label: item,
      value: item
    }
    status.backCateNameOptions.push(it);
  });
}

const searchOneShop = async () => {
  status.ifLoading = true;
  let url = "/searchOneShop";
  let res = await httpPostManage(url, {});
  for (let p in shopStatus) {
    shopStatus[p] = res.data[p];
  }
  baiduMapInfo.lat = res.data.latitude;
  baiduMapInfo.lon = res.data.longitude;
  await nextTick(() => {
    status.ifLoading = false;
  });
}

const submitShopInfo = () => {
  refForm["value"].validate(async (valid) => {
    if (valid) {
      let url = "/updateShopInfo"
      await httpPostManage(url, shopStatus);
      ElMessage.success("修改成功");
      baiduMapInfo.lat = shopStatus.latitude;
      baiduMapInfo.lon = shopStatus.longitude;
      baiduMapInfo.type = "preview";
    }
  });
}

/**设置机构位置 */
const setOrgPosition = (point) => {
  shopStatus.latitude = point.lat;
  shopStatus.longitude = point["lng"];
};

/**
 * 上传
 * */
const header = {
  Accept: "application/json;charset=UTF-8",
  tokenMiniAPP: VueCookies.get("tokenWeb") ? VueCookies.get("tokenWeb") : ""
};

const beforeUpload = (rawFile) => {
  //文件格式限制
  let types = ["jpg", "jpeg", "png", "psd"];
  const isImage = types.some((v) => {
    return rawFile.type.includes(v);
  });
  if (!isImage) {
    ElMessage.warning("上传⽂件只支持jpg、jpeg、png、psd格式!");
    return false;
  }

  //文件大小限制
  let size1M = rawFile.size / 1024 / 1024 < 1;
  if (!size1M) {
    ElMessage.warning("上传文件大小不能超过 1MB!");
    return false;
  }
  cutPicture(rawFile, 1, 1);
};

const handleSuccess = (response) => {
  shopStatus.frontImgUrl = jzjUrl + "/images/shopLogo" + response.data;
};

onMounted(async () => {
  await searchOneShop();
  await getAllBackCateName();
});
</script>

<style lang="scss" scoped>
@import "../../assets/style/layout.scss";
</style>